<template>
	<view class="recommendWrap">
			<view class="recommend-item" @tap="getDailySongSheet">
				<view class="iconWrap">
					<image src="../static/indexIcon/calendar-empty.png" mode="aspectFit"></image>
				</view>
				<text class="currentDate">{{currentDate}}</text>
				<text>每日推荐</text>
			</view>
			<view class="recommend-item">
				<view class="iconWrap">
					<image src="../static/indexIcon/broadcast-radio.png" mode="aspectFit"></image>
				</view>
				<text>私人FM</text>
			</view>
			<view class="recommend-item">
				<view class="iconWrap">
					<image src="../static/indexIcon/list-view.png" mode="aspectFit"></image>
				</view>
				<text>歌单</text>
			</view>
			<view class="recommend-item">
				<view class="iconWrap">
					<image src="../static/indexIcon/ranking.png" mode="aspectFit"></image>
				</view>
				<text>排行榜</text>
			</view>
	</view>
</template>

<script>
export default {
	name:"recommend",
	data() {
		return {
			currentDate: ''
		}
	},
	methods:{
		getDailySongSheet(){
			let that = this
			uni.getStorage({
				key: 'userInfo',
				success:function(res){
					uni.navigateTo({
						url: '../dailySongs/dailySongs'
					})
				},
				fail:function(){
					uni.showToast({
						title: '>_< 登录才有推荐哦',
						icon: 'none'
					})
				}
			})
		}
	},
	created() {
		// 获取当前日期数并渲染至 每日推荐图标中
		let cur = new Date(new Date().getTime()).getDate() + ''
		this.currentDate = cur.padStart(2, '0')
	}
}
</script>

<style scoped>
.recommendWrap {
	width: 102%;
	height: 100px;
	display: flex; 
	justify-content: space-evenly;
	align-items: center;
	border-bottom: 1px solid #CCCCCC;
}
.recommendWrap  .recommend-item {
	width: 70px;
	height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	position: relative;
}
	
.recommendWrap .recommend-item .iconWrap {
	width: 60px;
	height: 60px;
	background-color: #fef6f6;
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 3px;
}

.recommendWrap .recommend-item .iconWrap image{
	width: 40px;
	height: 40px;
}

.recommendWrap .recommend-item text {
	font-weight: 500;
}

.currentDate {
	position: absolute;
	top: 1.4rem;
	left: 1.55rem;
	color: #ec4141;
	font-size: 1.2rem;
	font-weight: 600;
}
</style>
